<template>
	<view class="connect">
				<!-- <u-navbar :border-bottom="false" :custom-back="backHome" :background="{background:style.color2}" back-text="登录" title=" "></u-navbar> -->
		<view class="top_bgc" style="padding-top: 85rpx;" :style="background">
			<view class="top_desc">
				<view class="top_desc_left">
					<span class="top_desc_title1">欢迎注册日中商城</span>
					<view class="top_desc_left_bar">
						<view class="top_desc_bar_item">
							<image style="width: 28rpx; height:28rpx;" src="../../static/inde_png/index_icon_1.png" mode=""></image>
							<span class="top_desc_bar_item_title">自营商品</span>
						</view>
						<view class="top_desc_bar_item">
							<image style="width: 28rpx; height:28rpx;" src="../../static/inde_png/index_icon_2.png" mode=""></image>
							<span class="top_desc_bar_item_title">日本直邮</span>
						</view>
						<view class="top_desc_bar_item">
							<image style="width: 28rpx; height:28rpx;" src="../../static/inde_png/index_icon_3.png" mode=""></image>
							<span class="top_desc_bar_item_title">正品保障</span>
						</view>
					</view>
				</view>
				<image style="width: 224rpx; height: 224rpx;" src="../../static/inde_png/index_icon_10.png" mode=""></image>
			</view>
			<view class="" style="padding: 0 30rpx;">
				<view class="nei_box" style="padding-top: 20rpx;">
					<view class="input_item">
						<view class="input_item_left">
							手机号/邮箱
						</view>
						<view class="input_box">
							<input  v-model="model" type="text" class=""  placeholder="请输入手机号/邮箱" />
						</view>
					</view>
					<view class="input_item">
						<view class="input_item_left">
							验证码
						</view>
						<view class="input_box">
							<input  v-model="code" type="text" class=""  placeholder="请输入验证码" />
							<u-button @click="getCode('register')" size="mini" :hair-line='false' :disabled="disabled" :ripple="true" shape="square" ripple-bg-color="#ccc">{{btn_text}}</u-button>
						</view>
					</view>
					<view class="input_item">
						<view class="input_item_left">
							密码
						</view>
						<view class="input_box">
							<input  v-model="passworde" type="text" class=""  placeholder="请输入密码" />
						</view>
					</view>
					<view class="input_item">
						<view class="input_item_left">
							确认密码
						</view>
						<view class="input_box">
							<input  v-model="password_copy" type="text" class=""  placeholder="请输入确认密码" />
						</view>
					</view>
				</view>
				<view @click="login" class="login_btn">
					注册
				</view>
				<view class="back_text" @click="backHome">
					<span>返回登录</span>
				</view>
				
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passworde:'',
				password_copy:'',
				phonecode:'',//短信验证码
				noewPhone:'',//新手机号
				phoneSHow:false, // 修改手机号弹出
				wx_info:{}, //微信登录返回用户信息
				isToast:false,
				code:'',
				model:'',
				isOk:false,
				disabled:false,
				disabled1:false,
				btn_text:'获取验证码',
				btn_text1:'获取验证码',
				time : null,
				times : 120 ,//剩余时间
				loginType:1,
				isWixin:false,//是否安装微信
				isSinaweibo:false,//是否安装微博
				style:{},
				background:{}
			}
		},
		onShow() {
			this.isWixin = uni.getStorageSync('isWeixin')
			this.isSinaweibo = uni.getStorageSync('isSinaweibo')
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
			this.background = {
				 'background':`
				 radial-gradient(circle at top left, ${this.style.color8} 0%, transparent 90%), 
				 radial-gradient(circle at top right, ${this.style.color9} 0%, transparent 90%),
				 radial-gradient(circle at bottom left, white 30%, transparent 70%),
				 radial-gradient(circle at bottom right, white 30%, transparent 70%)`,
				'backgroundBlendMode': 'screen', /* 混合模式优化颜色过渡 */
			}
		},
		methods: {
			navto(url){
				uni.navigateTo({
					url:url
				})
			},
			backHome(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			login(){
				var data = {
					"mobile": this.model, //手机号
					"email":this.model, //邮箱
					"password": this.passworde, //密码
					"sms_code": this.code //手机号验证码
				}
				// console.log(data)
				if(this.model == ''){
					uni.showToast({
						title:'请输入手机号/邮箱',
						icon:'none'
					})
					return
				}
				var phone = /^[1][123456789][0-9]{9}$/;
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				let isEmail = false
				
				if (this.model.includes("@")) {
					// 输入的是邮箱
				    isEmail = true
					if(!emailRegex.test(this.model)){
						uni.showToast({
							title:'请输入正确的邮箱',
							icon:'none'
						})
						return
					}
				}else{
					// 输入的是手机号
					if(!phone.test(this.model)){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						return
					}
				}
				if(this.code == ''){
					uni.showToast({
						title:'请获取验证码',
						icon:'none'
					})
					return
				}
				if(this.passworde == ''){
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					return
				}
				if(this.passworde != this.password_copy){
					uni.showToast({
						title:'连词密码输入的不一致',
						icon:'none'
					})
					return
				}
				if(isEmail){
					delete data.mobile
				}else{
					delete data.email
				}
				uni.showLoading({
					title:'注册中...',
					mask:true
				})
				this.$gugoApi.register(data).then(res=>{
					uni.showToast({
						title:'注册成功',
						icon:'none'
					})
					uni.hideLoading()
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}).catch(err=>{
					uni.hideLoading()
					uni.showToast({
						title:err.data.title,
						icon:'none'
					})
				})
				
				
			},
			getCode(type){
				// 获取手机号验证码
				var data = {
					mobile:this.model,
					email:this.model,
					type:type
				}
				if(this.model == ''){
					uni.showToast({
						title:'请输入手机号/验证码',
						icon:'none'
					})
					return
				}
				var phone = /^[1][123456789][0-9]{9}$/;
				var isEmail = false
				// isEmail = true
				// const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				// if(!emailRegex.test(this.model)){
				// 	uni.showToast({
				// 		title:'请输入正确的邮箱',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				if (this.model.includes("@")) {
					isEmail = true
					const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
					if(!emailRegex.test(this.model)){
						uni.showToast({
							title:'请输入正确的邮箱',
							icon:'none'
						})
						return
					}
				}else{
					isEmail = false
					if(!phone.test(this.model)){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						return
					}
				}
				if(isEmail){
					delete data.mobile
					this.getEmailCode(data)
				}else{
					delete data.email
					this.getPhoneCode(data)
				}
				this.disabled = true
				
				
				
			},
			getPhoneCode(data){
				this.$gugoApi.sendSmsCode(data).then(res=>{
					uni.showToast({
						title:'发送成功',
						icon:'none'
					})
					this.time = setInterval(()=>{
						this.times -= 1
						if(this.times == 0){
							this.disabled = false
							this.btn_text = `获取验证码`
							clearInterval(this.time)
							this.time = null
							this.times = 120
						}else{
							this.disabled = true
							this.btn_text = `${this.times}s后再次获取`
						}
					},1000)
				}).catch(err=>{
					// console.log(err , '返回信息')
					this.disabled = false
					uni.showToast({
						title:err.data.message,
						icon:'none'
					})
				})
			},
			getEmailCode(data){
				this.$gugoApi.post_email(data).then(res=>{
					uni.showToast({
						title:'发送成功',
						icon:'none'
					})
					this.time = setInterval(()=>{
						this.times -= 1
						if(this.times == 0){
							this.disabled = false
							this.btn_text = `获取验证码`
							clearInterval(this.time)
							this.time = null
							this.times = 120
						}else{
							this.disabled = true
							this.btn_text = `${this.times}s后再次获取`
						}
					},1000)
				}).catch(err=>{
					// console.log(err , '返回信息')
					this.disabled = false
					uni.showToast({
						title:err.data.message,
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	@import url('./login.css');
	/* @import url('../userInfo/userInfo.css'); */
</style>
